<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<title>登录界面</title>
	<link href="css/default.css" rel="stylesheet" type="text/css" />
	<!--必要样式-->
	<link href="css/styles.css" rel="stylesheet" type="text/css" />
	<link href="css/demo.css" rel="stylesheet" type="text/css" />
	<link href="css/loaders.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div class='login'>
		<div class='login_title'>
			<span>管理员登录</span>
		</div>
		<div class='login_fields'>
			<div class='login_fields__user'>
				<div class='icon'>
					<img alt="" src='img/user_icon_copy.png'>
				</div>
				<input name="login" placeholder='用户名' maxlength="16" type='text' autocomplete="off" value="kbcxy" />
				<div class='validation'>
					<img alt="" src='img/tick.png'>
				</div>
			</div>
			<div class='login_fields__password'>
				<div class='icon'>
					<img alt="" src='img/lock_icon_copy.png'>
				</div>
				<input name="pwd" placeholder='密码' maxlength="16" type='text' autocomplete="off">
				<div class='validation'>
					<img alt="" src='img/tick.png'>
				</div>
			</div>
			<div class='login_fields__password'>
				<div class='icon'>
					<img alt="" src='img/key.png'>
				</div>
				<input name="code" placeholder='验证码' maxlength="4" type='text' name="ValidateNum" autocomplete="off">
				<div class='validation' style="opacity: 1; right: -5px;top: -3px;">
					<canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
				</div>
			</div>
			<div class='login_fields__submit' id="login">
				<input type='button' value='登录'/>
			</div>
		</div>
		<div class='success'>
		</div>
		<div class='disclaimer'>
			<p>欢迎登陆后台管理系统</p>
		</div>
	</div>
	<div class='authent'>
		<div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
			<div class="loader-inner ball-clip-rotate-multiple">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<p>认证中...</p>
	</div>
	<div class="OverWindows"></div>
	<link href="layui/css/layui.css" rel="stylesheet" type="text/css" />
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="https://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
	<script type="text/javascript" src='js/stopExecutionOnTimeout.js?t=1'></script>
	<script src="layui/layui.js" type="text/javascript"></script>
	<script src="js/Particleground.js" type="text/javascript"></script>
	<script src="Js/Treatment.js" type="text/javascript"></script>
	<script src="js/jquery.mockjax.js" type="text/javascript"></script>
	<script type="text/javascript">
		var login = document.getElementById('login');
		var canGetCookie = 0; //是否支持存储Cookie 0 不支持 1 支持
		var ajaxmockjax = 1; //是否启用虚拟Ajax的请求响 0 不启用  1 启用
		//默认账号密码

		var truelogin = "kbcxy";
		var truepwd = "1";

		var CodeVal = 0;
		Code();

		function Code() {
			if (canGetCookie == 1) {
				createCode("AdminCode");
				var AdminCode = getCookieValue("AdminCode");
				showCheck(AdminCode);
			} else {
				showCheck(createCode(""));
			}
		}

		function showCheck(a) {
			CodeVal = a;
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.clearRect(0, 0, 1000, 1000);
			ctx.font = "80px 'Hiragino Sans GB'";
			ctx.fillStyle = "#E8DFE8";
			ctx.fillText(a, 0, 100);
		}
		$(document).keypress(function (e) {
			// 回车键事件  
			if (e.which == 13) {
				$('input[type="button"]').click();
			}
		});
		//粒子背景特效
		//			$('body').particleground({
		//				dotColor: '#E8DFE8',
		//				lineColor: '#133b88'
		//			});
		//			$('input[name="pwd"]').focus(function() {
		//				$(this).attr('type', 'password');
		//			});
		//			$('input[type="text"]').focus(function() {
		//				$(this).prev().animate({
		//					'opacity': '1'
		//				}, 200);
		//			});
		//			$('input[type="text"],input[type="password"]').blur(function() {
		//				$(this).prev().animate({
		//					'opacity': '.5'
		//				}, 200);
		//			});
		//			$('input[name="login"],input[name="pwd"]').keyup(function() {
		//				var Len = $(this).val().length;
		//				if(!$(this).val() == '' && Len >= 5) {
		//					$(this).next().animate({
		//						'opacity': '1',
		//						'right': '30'
		//					}, 200);
		//				} else {
		//					$(this).next().animate({
		//						'opacity': '0',
		//						'right': '20'
		//					}, 200);
		//				}
		//			});
		var open = 0;
		layui.use('layer', function () {
			//非空验证
			$('input[type="button"]').click(function () {
				var login = $('input[name="login"]').val();
				var pwd = $('input[name="pwd"]').val();
				var code = $('input[name="code"]').val();
				if (login == '') {
					ErroAlert('请输入您的账号');
				} else if (pwd == '') {
					ErroAlert('请输入密码');
				} else if (code == '' || code.length != 4) {
					ErroAlert('输入验证码');
				} else {
					//登陆
					var JsonData = {
						login: login,
						pwd: pwd,
						code: code
					};
					//$.post("url",JsonData,function(data) {
					console.log(111);
					alert("登录成功");
					//window.location.href = 'http://127.0.0.1:8020/jQueryLogin/index.html?__hbt=1567408106021';
					//});						
				}
			})
		})
		//全屏
		var fullscreen = function () {
			elem = document.body;
			if (elem.webkitRequestFullScreen) {
				elem.webkitRequestFullScreen();
			} else if (elem.mozRequestFullScreen) {
				elem.mozRequestFullScreen();
			} else if (elem.requestFullScreen) {
				elem.requestFullscreen();
			} else {
				//浏览器不支持全屏API或已被禁用  
			}
		}
	</script>
	<script type="text/javascript" src="img/ThreeWebGL.js"></script>
	<script type="text/javascript" src="img/ThreeExtras.js"></script>
	<script type="text/javascript" src="img/Detector.js"></script>
	<script type="text/javascript" src="img/RequestAnimationFrame.js"></script>
	<script id="vs" type="x-shader/x-vertex">
			varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }
		</script>
	<script id="fs" type="x-shader/x-fragment">
			uniform sampler2D map; uniform vec3 fogColor; uniform float fogNear; uniform float fogFar; varying vec2 vUv; void main() { float depth = gl_FragCoord.z / gl_FragCoord.w; float fogFactor = smoothstep( fogNear, fogFar, depth ); gl_FragColor = texture2D( map, vUv ); gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 ); gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor ); }

		</script>
	<script type="text/javascript">
		if (!Detector.webgl) Detector.addGetWebGLMessage();
		var canvas = document.createElement('canvas');
		canvas.width = 32;
		canvas.height = window.innerHeight;
		var context = canvas.getContext('2d');
		var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
		gradient.addColorStop(0, "#1e4877");
		gradient.addColorStop(0.5, "#4584b4");
		context.fillStyle = gradient;
		context.fillRect(0, 0, canvas.width, canvas.height);
		document.body.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
		var container;
		var camera, scene, renderer, sky, mesh, geometry, material, i, h, color, colors = [],
			sprite, size, x, y, z;
		var mouseX = 0,
			mouseY = 0;
		var start_time = new Date().getTime();
		var windowHalfX = window.innerWidth / 2;
		var windowHalfY = window.innerHeight / 2;
		init();
		animate();

		function init() {
			container = document.createElement('div');
			document.body.appendChild(container);
			camera = new THREE.Camera(30, window.innerWidth / window.innerHeight, 1, 3000);
			camera.position.z = 6000;
			scene = new THREE.Scene();
			geometry = new THREE.Geometry();
			var texture = THREE.ImageUtils.loadTexture('');
			texture.magFilter = THREE.LinearMipMapLinearFilter;
			texture.minFilter = THREE.LinearMipMapLinearFilter;
			var fog = new THREE.Fog(0x4584b4, -100, 3000);
			material = new THREE.MeshShaderMaterial({
				uniforms: {
					"map": {
						type: "t",
						value: 2,
						texture: texture
					},
					"fogColor": {
						type: "c",
						value: fog.color
					},
					"fogNear": {
						type: "f",
						value: fog.near
					},
					"fogFar": {
						type: "f",
						value: fog.far
					},
				},
				vertexShader: document.getElementById('vs').textContent,
				fragmentShader: document.getElementById('fs').textContent,
				depthTest: false
			});
			var plane = new THREE.Mesh(new THREE.Plane(64, 64));
			for (i = 0; i < 8000; i++) {
				plane.position.x = Math.random() * 1000 - 500;
				plane.position.y = -Math.random() * Math.random() * 200 - 15;
				plane.position.z = i;
				plane.rotation.z = Math.random() * Math.PI;
				plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
				GeometryUtils.merge(geometry, plane)
			}
			mesh = new THREE.Mesh(geometry, material);
			scene.addObject(mesh);
			mesh = new THREE.Mesh(geometry, material);
			mesh.position.z = -8000;
			scene.addObject(mesh);
			renderer = new THREE.WebGLRenderer({
				antialias: false
			});
			renderer.setSize(window.innerWidth, window.innerHeight);
			container.appendChild(renderer.domElement);
			document.addEventListener('mousemove', onDocumentMouseMove, false);
			window.addEventListener('resize', onWindowResize, false)
		}

		function onDocumentMouseMove(event) {
			mouseX = (event.clientX - windowHalfX) * 0.25;
			mouseY = (event.clientY - windowHalfY) * 0.15
		}

		function onWindowResize(event) {
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth, window.innerHeight)
		}

		function animate() {
			requestAnimationFrame(animate);
			render()
		}

		function render() {
			position = ((new Date().getTime() - start_time) * 0.03) % 8000;
			camera.position.x += (mouseX - camera.target.position.x) * 0.01;
			camera.position.y += (-mouseY - camera.target.position.y) * 0.01;
			camera.position.z = -position + 8000;
			camera.target.position.x = camera.position.x;
			camera.target.position.y = camera.position.y;
			camera.target.position.z = camera.position.z - 1000;
			renderer.render(scene, camera)
		}
	</script>
</body>

</html>